<template>
  <div id="log">
    <!-- 搜索 -->
    <div class="top">
      <el-form :model="ParmasPage" label-position="top" type="flex" justify="center">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="手机号">
              <el-input
                clearable
                size="large"
                v-model="ParmasPage.phone"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="用户名称">
              <el-input
                clearable
                size="large"
                v-model="ParmasPage.realName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="创建日期">
              <el-date-picker
                v-model="ParmasPage.createTime"
                size="large"
                type="daterange"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD hh:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="flex">
          <el-col :span="6" style="margin-top: 10px; padding-left: 40px">
            <el-form-item>
              <el-button size="large" style="width: 100px" @click="resetBtn">重置</el-button>
              <el-button
                type="primary"
                size="large"
                style="width: 100px; color: #fff"
                @click="Btnsearch"
              >
                搜索
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 底部表格 -->
    <div class="table">
      <el-table :data="TableList" style="border: 1px solid #f1f1f1" stripe empty-text="暂无数据">
        <el-table-column align="center" label="序号" width="100px">
          <template v-slot="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="userName" label="用户名称"></el-table-column>
        <el-table-column align="center" prop="clueNum" label="线索数量"></el-table-column>
        <el-table-column align="center" prop="businessNum" label="商机数量"></el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
          sortable
        ></el-table-column>
        <el-table-column align="center" prop="phone" label="手机号码"></el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="handleBtn(row.id)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row justify="center">
        <el-col :span="24" class="pagination-col">
          <el-pagination
            :page-sizes="[10, 20, 30]"
            :current-page="ParmasPage.page"
            :small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="ParmasPage.total"
            :background="false"
            @current-change="changePage"
            @size-change="changeSize"
          />
        </el-col>
      </el-row>
    </div>
  </div>
  <TransferDialog
    v-model.sycn="showDialog"
    @close="showDialog = $event"
    :date="DialogDate"
  ></TransferDialog>
</template>
<script setup>
import TransferDialog from './TransferDialog.vue'
import { getTransferList, getTransferdetail } from '@/api/transfer.js'
import { ref, onMounted } from 'vue'
const showDialog = ref(false)
const ParmasPage = ref({
  size: 10,
  page: 1,
  total: 0,
  phone: '',
  realName: '',
  createTime: '',
  deptName: '', //分配部门
  personnel: '', //分配人员
  id: ''
})
const DialogDate = ref(null)
const TableList = ref([])
const TransferList = async () => {
  const { data, total } = await getTransferList(ParmasPage.value)
  ParmasPage.value.total = total
  TableList.value = data
}
onMounted(() => {
  TransferList()
})
// 搜索
const Btnsearch = async () => {
  console.log(ParmasPage.value)
  ParmasPage.value.page = 1
  TransferList()
}
// 重置
const resetBtn = () => {
  ParmasPage.value = {
    size: 10,
    page: 1,
    total: 0
  }
  TransferList()
}
// 处理
const handleBtn = async (id) => {
  const { data } = await getTransferdetail(id)
  DialogDate.value = { ...data, deptName: '', personnel: '', id: id }
  showDialog.value = true
}
// 切换分页
const changePage = async (newPage) => {
  ParmasPage.value.page = newPage
  await TransferList()
}
// 切换分页显示数据量
const changeSize = async (newSize) => {
  ParmasPage.value.size = newSize
  ParmasPage.value.page = 1
  await TransferList()
}
</script>
<style lang="less" scoped>
#log {
  // height: 100vh;
  width: 100%;
  background-color: #fff;
  padding: 50px 30px 50px 30px;
}
::v-deep .el-input__wrapper {
  background-color: #f5f5f5;
}
.table {
  margin-top: 30px;
}
.flex {
  display: flex;
  justify-content: end;
}
/* 定义表头样式 */
::v-deep .el-table th {
  text-align: center;
  background-color: #eaf1ef; /* 设置表头颜色 */
  color: #666; /* 设置表头文字颜色 */
}
.pagination-col {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}
</style>
